import * as THREE from 'three'

let renderer: THREE.WebGLRenderer;
const width = document.getElementById('canvas-frame').clientWidth
const height = document.getElementById('canvas-frame').clientHeight
function initThree() {
    renderer = new THREE.WebGLRenderer({
        antialias: true
    })
    renderer.setSize(width, height)
    document.getElementById('canvas-frame').appendChild(renderer.domElement)
    renderer.setClearColor(0xffffff, 1.0)
}

let camera:THREE.PerspectiveCamera;
function initCamera() {
    camera = new THREE.PerspectiveCamera(45, width/ height, 1, 10000)
    camera.position.set(600, 0, 600)
    camera.up.set(0,1,0)
    camera.lookAt(0,0,0)
}

let scene:THREE.Scene;
function initScene() {
    scene = new THREE.Scene()
}

let light:THREE.AmbientLight;
function initLight() {
    light = new THREE.AmbientLight(0xffffff);
    scene.add(light)
}

let cube;
function initObject() {
    let geometry = new THREE.BoxGeometry(200, 100, 50, 4, 4)
    let material = new THREE.MeshLambertMaterial({color:0x880000})
    const mesh = new THREE.Mesh(geometry, material)
    scene.add(mesh)
}

function threeStart() {
    initThree();
    initCamera();
    initScene()
    initLight()
    initObject()
    renderer.clear()
    render();
}

function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render)
}

threeStart()